<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>房子查询页</title>
    <link rel="stylesheet" th:href="@{/assets/css/styles.css}">
    <link rel="stylesheet" th:href="@{/assets/css/colors.css}">
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/popper.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/js/custom.js}"></script>
    <script th:src="@{/assets/js/daterangepicker.js}"></script>
    <script th:src="@{/assets/js/dropzone.js}"></script>
    <script th:src="@{/assets/js/imagesloaded.js}"></script>
    <script th:src="@{/assets/js/ion.rangeSlider.min.js}"></script>
    <script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/assets/js/lightbox.js}"></script>
    <script th:src="@{/assets/js/markerclusterer.js}"></script>
    <script th:src="@{/assets/js/moment.min.js}"></script>
    <script th:src="@{/assets/js/morris.min.js}"></script>
    <script th:src="@{/assets/js/raphael.min.js}"></script>
    <script th:src="@{/assets/js/select2.min.js}"></script>
    <script th:src="@{/assets/js/slick.js}"></script>
    <script th:src="@{/assets/js/slider-bg.js}"></script>
    <script th:src="@{/assets/js/script.js}"></script>
    <link rel="stylesheet" th:href="@{/assets/css/colors.css}">
    <link rel="stylesheet" th:href="@{/assets/plugins/bootstrap-fileinput/css/fileinput.min.css}">
</head>
<body>
    <!-- 复用首页头部 -->
    <header th:replace="index::header"></header>

    <!-- 查询的房子信息展示 -->
    <section class="gray-simple">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <div class="page-sidebar">
                        <!-- 查询条件 -->
                        <form th:action="@{/searchHouses}">
                            <!-- 根据评分或时间排序 -->
                            <div class="form-group">
                                <select name="orderType" id="price" class="form-control">
                                    <option value="score" th:selected="${houseDTO.orderType == null || houseDTO.orderType == 'score'}">高分优先</option>
                                    <option value="create_time" th:selected="${houseDTO.orderType == 'create_time'}">最新优先</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <input type="text" name="city" class="form-control" placeholder="城市" th:value="${houseDTO.city}">
                            </div>
                            <div class="form-group">
                                <select name="rentType" id="selectRentType" class="form-control">
                                    <option value="none" th:selected="${houseDTO.rentType == 'none'}">不限</option>
                                    <option value="whole" th:selected="${houseDTO.rentType == 'whole'}">整租</option>
                                    <option value="share" th:selected="${houseDTO.rentType == 'share'}">合租</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <div class="input-with-icon">
                                    <input type="text" id="address" name="address" class="form-control" placeholder="小区" th:value="${houseDTO.address}">
                                    <i class="ti-search"></i>
                                </div>
                            </div>
                            <div class="form-group">
                                <h6>选择价格范围</h6>
                                <div>
                                    <input type="text" class="js-range-slider-price" name="priceRange" />
                                </div>
                            </div>
                            <div class="form-group">
                                <h6>选择房屋面积范围</h6>
                                <div>
                                    <input type="text" class="js-range-slider-area" name="areaRange" />
                                </div>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-theme full-width bg-2">搜索</button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-lg-8 col-md-12 col-sm-12">
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12" th:each="house:${houses}">
                            <div class="single_property_style property_style_2 modern">
                                <!-- 房子图片信息 -->
                                <div class="listing_thumb_wrapper">
                                    <a th:href="@{|/houseDetail/${house.id}|}"><img th:src="@{|/assets/img/house/${house.thumbnailUrl}|}" class="img-fluid mx-auto"></a>
                                </div>
                                <!-- 房子文字信息 -->
                                <div class="property_caption_wrappers pb-0">
                                    <div class="property_short_detail">
                                        <div class="pr_type_status">
                                            <h4><a th:href="@{|/houseDetail/${house.id}|}" th:text="${house.title}">整租-德馨苑-3室一厅</a></h4>
                                            <div>
                                                <a th:text="${house.address}">四川省成都市郫都区西华大学德馨x栋xxx号</a>
                                            </div>
                                        </div>
                                        <div class="property-real-price">
                                            <a class="cl-blue">￥<span class="price_status"></span><span th:text="${house.monthRent}">1899</span>/月</a>
                                            <a th:if="${house.score != null}" class="cl-blue" style="position:absolute; right: 25px;">
                                                <i class="ti-star" style="color: #f6c100; font-size: 20px;"></i>
                                                <span style="color: #ff6a00; font-size: 18px;"
                                                      th:text="${#numbers.formatDecimal(house.score, 1, 'COMMA', 2, 'POINT')}">5.00</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="modern_property_footer">
                                    <div class="property-lists flex-1">
                                        <ul>
                                            <li>
                                                <span class="flatcons"><img th:src="@{/assets/img/bed.svg}"></span><span th:text="${house.bedroomNum}">3</span>卧室
                                            </li>
                                            <li>
                                                <span class="flatcons"><img th:src="@{/assets/img/bath.svg}"></span><span th:text="${house.toiletNum}">3</span>卫生间
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="fp_types">
                                        <a href="javascript:void(0)" class="markHouse" th:onclick="|submitMark(${house.id})|">
                                            <i class="ti-heart"></i>
                                            <span th:id="|markStatus${house.id}|" th:text="${house.isMarked?'已收藏':'收藏'}"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 分页 -->
                    <nav class="mt-5" th:if="${page.rows>0}" th:replace="index::pagination"></nav>
                </div>
            </div>
        </div>
    </section>

    <!-- 复用首页底部 -->
    <div th:replace="index::footer"></div>

    <script th:inline="javascript">
        var minPrice = [[${houseDTO.minPrice}]];
        var maxPrice = [[${houseDTO.maxPrice}]];
        $(".js-range-slider-price").ionRangeSlider({
            type:"double",
            min:0,
            max:20000,
            from:minPrice,
            to:maxPrice,
            grid:true
        });

        var minArea = [[${houseDTO.minArea}]];
        var maxArea = [[${houseDTO.maxArea}]];
        $(".js-range-slider-area").ionRangeSlider({
            type:"double",
            min:0,
            max:300,
            from:minArea,
            to:maxArea,
            grid:true
        });
    </script>
</body>
</html>